<template>
    <app-layout>
        <view class="old-page" v-if="isOld">
            <app-nav-bar v-if="navbarStatus" :fixed="true" :title="pageName" :color="tabBarNavs.top_text_color"
                         :background-color="tabBarNavs.top_background_color"></app-nav-bar>
            <app-user-center-top
                :top-style="userCenter.top_style"
                :top-pic-url="userCenter.top_pic_url"
                :member-pic-url="userCenter.member_pic_url"
                :is_icon_super_vip="is_icon_super_vip"
                :address="userCenter.address"
                :user-name-color="userCenter.user_name_color"
            ></app-user-center-top>

            <view class="u-foot-box main-center" v-if="userCenter.is_foot_bar_status == 1">
                <view @click="router(item.name)" class="u-foot-item main-center" v-for="(item, key) in foot_bar" :key="key">
                    <image class="u-icon" :src="item.icon_url"></image>
                    <view class="u-foot-info">
                        <view class="u-foot-num">{{item.name | showNum(userInfo)}}</view>
                        <view>{{item.name}}</view>
                    </view>
                </view>
                <view class="u-line"></view>
            </view>

            <view style="padding: 0 24rpx">
                <app-vip-card></app-vip-card>
            </view>

            <app-account-balance
                v-if="account_bar_status == 1"
                :margin="true"
                :round="true"
                :input-user-center="userCenter"
            ></app-account-balance>

            <app-my-order
                v-if="userCenter.is_order_bar_status == 1"
                :margin="true"
                :round="true"
                :theme="getTheme"
                :order_bar="userCenter.order_bar"
            ></app-my-order>

            <view class="app-my-service" v-if="userCenter.is_menu_status == 1">
                <view class="title" v-if="userCenter.menu_title">{{userCenter.menu_title}}</view>
                <view class="list" :class="[listStyle]">
                    <!--  #ifdef MP -->
                    <view class="item" v-for="(item, index) in userCenter.menus" :key="index" >
                        <app-jump-button form
                                         :url="item.link_url"
                                         :open_type="item.open_type"
                                         :item="item"
                                         :arrangement="`${userCenter.menu_style === '1' ? 'row' : userCenter.menu_style === '2' ? 'column' : ''}`">
                            <view style="width: 100%"
                                  class="item-container"
                                  :class="[
                                      userCenter.menu_style=='1'?'dir-left-nowrap cross-center':'',
                                      userCenter.menu_style=='2'?'dir-top-nowrap cross-center':'',
                                  ]">
                                <view class="box-grow-0">
                                    <image :src="item.icon_url" class="icon"></image>
                                </view>
                                <view class="box-grow-1" style="max-width: 100%">
                                    <view class="name">{{item.name}}</view>
                                </view>
                                <view class="box-grow-0" v-if="userCenter.menu_style=='1'">
                                    <image src="/static/image/icon/arrow-right.png" class="arrow"></image>
                                </view>
                            </view>
                        </app-jump-button>
                    </view>
                    <!--  #endif -->
                    <!--  #ifdef H5 -->
                    <block v-for="(item, index) in menus" :key="index">
                        <view class="item" v-if="item.open_type !== 'app'">
                            <app-jump-button form
                                             :url="item.link_url"
                                             :open_type="item.open_type"
                                             :item="item"
                                             :arrangement="`${userCenter.menu_style === '1' ? 'row' : userCenter.menu_style === '2' ? 'column' : ''}`">
                                <view style="width: 100%"
                                      class="item-container"
                                      :class="[
                                      userCenter.menu_style=='1'?'dir-left-nowrap cross-center':'',
                                      userCenter.menu_style=='2'?'dir-top-nowrap cross-center':'',
                                  ]">
                                    <view class="box-grow-0">
                                        <image :src="item.icon_url" class="icon"></image>
                                    </view>
                                    <view class="box-grow-1" style="max-width: 100%">
                                        <view class="name">{{item.name}}</view>
                                    </view>
                                    <view class="box-grow-0" v-if="userCenter.menu_style=='1'">
                                        <image src="/static/image/icon/arrow-right.png" class="arrow"></image>
                                    </view>
                                </view>
                            </app-jump-button>
                        </view>
                        <view  v-else :id="item.id" class="item"></view>
                    </block>

                    <!--  #endif -->
                </view>
            </view>
            <!-- #ifdef H5 -->
            <view v-if="userInfo && isShowSetting" class="bd-setting dir-left-nowrap main-between cross-center" @click="routerGo">
                <view>设置</view>
                <image src="./../../static/image/icon/arrow-right.png" class="bd-arrow"></image>
            </view>
            <!-- #endif -->

            <app-copyright
                v-if="copyright && copyright.status == '1'"
                background-color="transparent"
                :link="copyrightLink"
                :pic-url="copyright.pic_url"
                :text="copyright.description"
                :sub-description="copyright.sub_description"
            ></app-copyright>
        </view>
        <view v-else-if="centerList && centerList.length > 0" :style="bgSetting">
            <app-nav-bar v-if="navbarStatus" :fixed="true" :has-height="false"
                         @headHeight="headHeight"
                         :back-color="scrollTop > 10 ? 'black' :'white'"
                         :background-color="scrollTop > 10 ? tabBarNavs.top_background_color :'rgba(0,0,0,0)'"
                         has-mall-setting="0" :title="pageName" :color="tabBarNavs.top_text_color"></app-nav-bar>
             <scroll-view @scroll="bindScroll" :style="scrollView" class="shop-all" scroll-y
                 scroll-anchoring>
                <view v-for="(temp,index) in centerList" :key="index">
                    <template v-if="showIndex > index">
                        <template v-if="temp.id === 'user'">
                            <app-user :nav="startHeight" :value="temp.data"></app-user>
                        </template>
                        <template v-else-if="temp.id === 'foot'">
                            <app-foot :value="temp.data"></app-foot>
                        </template>
                        <template v-else-if="temp.id === 'svip'">
                            <app-svip :value="temp.data"></app-svip>
                        </template>
                        <template v-else-if="temp.id === 'order'">
                            <app-order :theme="getTheme" :value="temp.data"></app-order>
                        </template>
                        <template v-else-if="temp.id === 'account'">
                            <app-account :value="temp.data"></app-account>
                        </template>
                        <template v-else-if="temp.id === 'menu'">
                            <app-menu :value="temp.data"></app-menu>
                            <!-- #ifdef H5 -->
                            <view v-if="userInfo && isShowSetting" class="bd-setting dir-left-nowrap main-between cross-center" @click="routerGo">
                                <view>设置</view>
                                <image src="./../../static/image/icon/arrow-right.png" class="bd-arrow"></image>
                            </view>
                            <!-- #endif -->
                        </template>
                        <template v-else-if="temp.id === 'goods'">
                            <view
                                :style="[
                            {'background-color':`${temp.data.backgroundColor}`,
                            'padding': `${temp.data.c_padding_top}rpx ${temp.data.c_padding_lr}rpx ${temp.data.c_padding_bottom}rpx`,

                            'background-image': temp.data.backgroundPicUrl ? `url(${temp.data.backgroundPicUrl})` : `none`,
                            'background-size':`${temp.data.backgroundWidth + '% ' + temp.data.backgroundHeight + '%'}`,
                            'background-position':`${transLabelBackgroundPosition(temp.data.position)}`,
                            'background-repeat':`${transLabelBackgroundRepeat(temp.data.mode)}`}]">
                                <template v-if="temp.data.catPosition === 'top'">
                                    <!--分类-->
                                    <template v-if="temp.data.showCat && temp.data.catList.length > 1">
                                        <scroll-view scroll-x :style="{backgroundColor: temp.data.catBgColor}"
                                                     style="margin-bottom: 12rpx"
                                                     scroll-with-animation
                                                     :scroll-left="temp.data.scrollLeft"
                                                     v-bind:class="[theme, 'u-scroll-view', 'dir-left-nowrap']">
                                            <text
                                                :id="`scroll-${catIndex}`"
                                                v-for="(catItem, catIndex) in temp.data.catList"
                                                v-bind:key="catIndex"
                                                v-bind:class="[
                                                    temp.data.catStyle === 2 && temp.data.activeCurrent === catIndex ?
                                                    'u-active-current-round'  :
                                                    temp.data.catStyle === 1 && temp.data.activeCurrent === catIndex ?
                                                    'u-active-current': 'u-default-text',
                                                    temp.data.catStyle === 2 ? 'u-current-round' : '',
                                                    'u-nav-item'
                                                ]"
                                                v-bind:style="temp.data.catStyle === 2 && temp.data.activeCurrent === catIndex ? `background-color: ${temp.data.tagColor ? temp.data.tagColor : theme.background};color: ${temp.data.catSelectedColor};`
                                                    : temp.data.catStyle === 1 && temp.data.activeCurrent === catIndex  ? `color: ${temp.data.catSelectedColor ? temp.data.catSelectedColor : theme.color};border-color: ${temp.data.tagColor ? temp.data.tagColor : theme.border}`
                                                    : temp.data.catStyle === 1 ? `color: ${temp.data.catUnselectedColor}`: `color: ${temp.data.catUnselectedColor}`"
                                                v-on:click="changeTopNav(catIndex,temp.data)"
                                            >
                                                {{ catItem.menuName }}
                                            </text>
                                        </scroll-view>
                                    </template>
                                    <app-diy-list :temp="temp" :theme="getTheme"></app-diy-list>
                                </template>

                                <template v-else>
                                    <app-recommended-product-list
                                        v-bind:show-cat="temp.data.showCat"
                                        v-bind:show-buy-btn="temp.data.showBuyBtn"
                                        v-bind:cat-style="temp.data.catStyle"
                                        v-bind:cat-list="temp.data.catList"
                                        v-bind:list="temp.data.list" :list-style="temp.data.listStyle"
                                        v-bind:goods-cover-proportion="temp.data.goodsCoverProportion"
                                        v-bind:fill="temp.data.fill" :goods-style="temp.data.goodsStyle"
                                        v-bind:show-goods-name="temp.data.showGoodsName"
                                        v-bind:show-goods-price="temp.data.showGoodsPrice"
                                        v-bind:buy-btn="temp.data.buyBtn" :sign="temp.id"
                                        v-bind:buy-btn-style="temp.data.buyBtnStyle"
                                        v-bind:buy-btn-text="temp.data.buyBtnText"
                                        v-bind:show-goods-tag="temp.data.showGoodsTag"
                                        v-bind:customize-goods-tag="temp.data.customizeGoodsTag"
                                        v-bind:goods-tag-pic-url="temp.data.goodsTagPicUrl"
                                        v-bind:button-color="temp.data.buttonColor"
                                        v-bind:is-under-line-price="temp.data.isUnderLinePrice"
                                        v-bind:theme="getTheme"
                                        v-bind:cat-position="temp.data.catPosition"
                                        v-on:buyProduct="buyProduct"
                                        v-bind:tag-color="temp.data.tagColor"
                                        v-bind:cat-selected-color="temp.data.catSelectedColor"
                                        v-bind:cat-unselected-color="temp.data.catUnselectedColor"
                                        v-bind:cat-bg-color="temp.data.catBgColor"
                                        v-bind:bg="temp.data.bg"
                                        v-bind:c-border-bottom="temp.data.c_border_bottom"
                                        v-bind:c-border-top="temp.data.c_border_top"
                                        v-bind:c-padding-lr="temp.data.c_padding_lr"
                                    ></app-recommended-product-list>
                                </template>
                            </view>
                        </template>
                        <template v-else-if="temp.id === 'banner'">
                            <template v-if="temp.data.banners.length > 0">
                                <view v-if="temp.data.effect == 1 || !temp.data.effect"
                                      :style="{backgroundColor: temp.data.bg_padding, padding: `${temp.data.c_padding_top}rpx ${temp.data.c_padding_lr}rpx ${temp.data.c_padding_bottom}rpx`}"
                                >
                                    <app-swiper
                                        :style="{height: temp.data.height + 'rpx'}"
                                        :list="temp.data.banners"
                                        :autoplay="temp.data.autoplay === 0 ? true : false"
                                        name="picUrl"
                                        :effect3d="temp.data.style === 2 ? true : false"
                                        :height="temp.data.height"
                                        :effect3dPreviousMargin="50"
                                        :imgMode="temp.data.fill === 0 ? 'aspectFit' : 'scaleToFill'"
                                        :interval="temp.data.interval ? temp.data.interval : 3000"
                                        :duration="temp.data.duration ? temp.data.duration : 500"
                                        :mode="temp.data.mode"
                                        v-bind:c-border-bottom="temp.data.c_border_bottom"
                                        v-bind:c-border-top="temp.data.c_border_top"
                                    ></app-swiper>
                                </view>
                                <view
                                    :style="{backgroundColor: temp.data.bg_padding, padding: `${temp.data.c_padding_top}rpx ${temp.data.c_padding_lr}rpx ${temp.data.c_padding_bottom}rpx`}"
                                    v-if="temp.data.effect == 2">
                                    <u-swiper
                                        :style="{height: temp.data.height + 'rpx'}"
                                        :list="temp.data.banners"
                                        name="picUrl"
                                        :height="temp.data.height"
                                        :interval="temp.data.interval ? temp.data.interval : 3000"
                                        :duration="temp.data.duration ? temp.data.duration : 500"
                                        :mode="temp.data.mode"
                                        :imgMode="temp.data.fill === 0 ? 'aspectFit' : 'scaleToFill'"
                                        :autoplay="temp.data.autoplay === 0 ? true : false"
                                        v-bind:c-border-bottom="temp.data.c_border_bottom"
                                        v-bind:c-border-top="temp.data.c_border_top"
                                    >
                                    </u-swiper>
                                </view>
                            </template>
                        </template>
                        <template v-else-if="temp.id === 'notice'">
                            <u-announcement
                                v-bind:bgColor="temp.data.background"
                                v-bind:btn-color="temp.data.btnColor"
                                v-bind:btn-height="temp.data.btnHeight"
                                v-bind:btn-radius="`${temp.data.btnRadius}rpx`"
                                v-bind:btn-text="temp.data.btnText"
                                v-bind:btn-text-color="temp.data.btnTextColor"
                                v-bind:btn-width="temp.data.btnWidth"
                                v-bind:content="temp.data.content"
                                v-bind:header-url="temp.data.headerUrl"
                                v-bind:icon="temp.data.icon"
                                v-bind:name="temp.data.name"
                                v-bind:textColor="temp.data.textColor"
                            ></u-announcement>
                        </template>
                        <template v-else-if="temp.id === 'rubik'">
                            <view style="position: relative">
                                <app-image-ad
                                    v-bind:image-style="temp.data.style"
                                    v-bind:list="temp.data.list"
                                    v-bind:height="temp.data.height"
                                ></app-image-ad>
                                <block v-for="(hotspot, hotspot_index) in temp.data.hotspot" v-bind:key="hotspot_index">
                                    <app-hotspot v-bind:hotspot="rubikHotspot(hotspot)"></app-hotspot>
                                </block>
                            </view>
                        </template>
                        <template v-else-if="temp.id === 'link'">
                            <app-associated-link
                                v-bind:arrows-switch="temp.data.arrowsSwitch"
                                v-bind:background="temp.data.background"
                                v-bind:color="temp.data.color"
                                v-bind:position="temp.data.position"
                                v-bind:style-color="temp.data.styleColor"
                                v-bind:link="Object.assign({}, temp.data.link)"
                                v-bind:styleNum="temp.data.style"
                                v-bind:pic-switch="temp.data.picSwitch"
                                v-bind:pic-url="temp.data.picUrl"
                                v-bind:font-size="temp.data.fontSize"
                                v-bind:title="temp.data.title"
                            ></app-associated-link>
                        </template>
                        <template v-else-if="temp.id === 'empty'">
                            <app-empty
                                v-bind:height="temp.data.height"
                                v-bind:background-color="temp.data.background"
                            ></app-empty>
                        </template>
                        <template v-else-if="temp.id === 'customer'">
                            <app-customer
                                v-bind:bg="temp.data.bg"
                                v-bind:bg-padding="temp.data.bg_padding"
                                v-bind:title="temp.data.title"
                                v-bind:title-color="temp.data.title_color"
                                v-bind:wechat="temp.data.wechat"
                                v-bind:wechat-color="temp.data.wechat_color"
                                v-bind:c-border-bottom="temp.data.c_border_bottom"
                                v-bind:c-border-top="temp.data.c_border_top"
                                v-bind:c-padding-top="temp.data.c_padding_top"
                                v-bind:c-padding-lr="temp.data.c_padding_lr"
                                v-bind:c-padding-bottom="temp.data.c_padding_bottom"
                                v-bind:copy-bg="temp.data.copy_bg"
                                v-bind:copy-border="temp.data.copy_border"
                                v-bind:copy-color="temp.data.copy_color"
                                v-bind:copy-radius="temp.data.copy_radius"
                                v-bind:copy-title="temp.data.copy_title"
                                v-bind:save-bg="temp.data.save_bg"
                                v-bind:save-border="temp.data.save_border"
                                v-bind:save-color="temp.data.save_color"
                                v-bind:save-radius="temp.data.save_radius"
                                v-bind:save-title="temp.data.save_title"

                                v-bind:two-bg="temp.data.two_bg"
                                v-bind:two-border="temp.data.two_border"
                                v-bind:two-color="temp.data.two_color"
                                v-bind:two-radius="temp.data.two_radius"
                                v-bind:two-title="temp.data.two_title"
                                v-bind:two-icon="temp.data.two_icon"
                                v-bind:sub-title="temp.data.sub_title"
                                v-bind:sub-title-color="temp.data.sub_title_color"
                                v-bind:select-style="temp.data.select_style"
                            ></app-customer>
                        </template>
                    </template>
                </view>

                <app-copyright
                    v-if="copyright && copyright.status == '1'"
                    background-color="transparent"
                    :link="copyrightLink"
                    :pic-url="copyright.pic_url"
                    :text="copyright.description"
                    :sub-description="copyright.sub_description"
                ></app-copyright>
            </scroll-view>
        </view>
        <app-attr :goods="attrGoods.goods" :attrGroupList="attrGoods.goods.attr_groups" :theme="getTheme" :show="attrGoods.attrShow"></app-attr>
    </app-layout>
</template>

<script>
    import {mapGetters, mapState} from 'vuex';
    import AppUserCenterTop from '../../components/page-component/app-user-center-top/app-user-center-top.vue';
    import AppAccountBalance from './components/app-account-balance.vue';
    import AppMyOrder from '../../components/page-component/app-my-order/app-my-order.vue';
    import AppCopyright from '../../components/page-component/app-copyright/app-copyright.vue';
    import AppVipCard from '../../components/page-component/app-vip-card/app-vip-card.vue';
    import AppUser from './components/app-user.vue';
    import AppFoot from './components/app-foot.vue';
    import AppOrder from './components/app-order.vue';
    import AppSvip from './components/app-svip.vue';
    import AppAccount from './components/app-account.vue';
    import AppMenu from './components/app-menu.vue';
    import appRecommendedProductList from '../../components/page-component/app-recommended-product/app-recommended-product-list.vue';
    import uAnnouncement from '../../components/page-component/u-announcement/u-announcement.vue';
    import appSwiper from '../../components/page-component/app-swiper/app-swiper.vue';
    import uSwiper from '../../components/page-component/app-swiper/swiper.vue';
    import appImageAd from '../../components/page-component/app-image-ad/app-image-ad.vue';
    import appAssociatedLink from '../../components/page-component/app-associated-link/app-associated-link.vue';
    import appHotspot from '../../components/basic-component/app-hotspot/app-hotspot.vue';
    import appEmpty from '../../components/basic-component/app-empty/app-empty.vue';
    import appCustomer from '../../components/page-component/app-customer/app-customer.vue';
    import appNavBar from '../../components/page-component/index/app-nav-bar.vue';
    import appAttr from '@/components/page-component/app-attr/app-attr.vue';
    import appDiyList from '@/components/page-component/index/app-diy-list.vue';

    export default {
        name: 'user-center',
        components: {
            AppCopyright,
            AppUserCenterTop,
            AppAccountBalance,
            AppMyOrder,
            AppVipCard,
            AppUser,
            AppFoot,
            AppOrder,
            AppSvip,
            AppAccount,
            AppMenu,
            appRecommendedProductList,
            uAnnouncement,
            appSwiper,
            uSwiper,
            appImageAd,
            appAssociatedLink,
            appHotspot,
            appEmpty,
            appCustomer,
            appAttr,
            appNavBar,
            appDiyList
        },
        data() {
            return {
                isOld: false,
                showIndex: 1,
                attrGoods: {
                    goods: {},
                    attrShow: 0
                },
                centerList: [],
                scrollTop: 0,
                startHeight: 0,
            }
        },
        watch: {
            userCenter: {
                handler: function (newVal) {
                    this.isOld = false;
                    if (this.isNew && this.userCenter) {
                        let timer = setInterval(()=>{
                            if(this.showIndex < this.userCenter.length + 1) {
                                this.showIndex = this.showIndex + 1;
                            }else {
                                clearTimeout(timer)
                            }
                        },200)
                        this.centerList = this.userCenter
                        for(let temp of this.centerList) {
                            if(temp.id == 'goods' && temp.data.showCat) {
                                temp.data.activeCurrent = 0;
                                temp.data.scrollLeft = 0;
                                temp.data.list = temp.data.catList[0].goodsList;
                            }
                        }
                    }else {
                        this.isOld = true;
                    }
                },
                immediate: true,
            },
        },
        computed: {
            scrollView() {
                // #ifdef H5
                let style = `height: calc(100vh - 110rpx - env(safe-area-inset-bottom));`
                if(!this.isWechat) {
                    let windowHeight = uni.getSystemInfoSync().safeArea.height;
                    style = `height: calc(${windowHeight}px - 110rpx - env(safe-area-inset-bottom));`
                }
                // #endif
                // #ifndef H5
                let style = `height: calc(100vh - 110rpx - env(safe-area-inset-bottom));`
                // #endif
                return style;
            },
            navbarStatus: function () {
                // #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO
                return ['windows', 'mac'].indexOf(this.systemInfo.platform) === -1;
                // #endif
                // #ifdef H5
                return !this.$jwx.isWechat();
                // #endif
                // #ifdef MP-ALIPAY
                return false;
                // #endif
            },
            isNew: function() {
                return Array.isArray(this.userCenter) ? true : false
            },
            pageName: function() {
                return this.userCenterTitle  ? this.userCenterTitle : this.$children[0] ? this.$children[0].navigationBarTitle : '用户中心'
            },
            bg: function() {
                let obj = '';
                if(Array.isArray(this.userCenter)) {
                    for(let item of this.userCenter) {
                        if(item.id == 'background') {
                            obj = item.data
                        }
                    }
                }
                return obj
            },
            bgSetting: function() {
                let style = 'min-height: 100%;';
                if(this.bg) {
                    style += `background-color: ${this.bg.backgroundColor};background-image:url(${this.bg.backgroundPicUrl});background-size: ${this.bg.backgroundWidth}%  ${this.bg.backgroundHeight}%;background-repeat: ${this.bg.repeatText};background-position: ${this.bg.positionText}`;
                }
                return style;
            },
            ...mapState({
                copyright: state => state.mallConfig.copyright,
                userInfo: state => state.user.info,
                systemInfo: state => state.gConfig.systemInfo,
                is_icon_super_vip: function (state) {
                    return state.mallConfig.mall.setting.is_icon_super_vip;
                },
                foot_bar: function(state) {
                    return state.userCenter.data.foot_bar;
                },
                userCenterTitle: function(state) {
                    return state.userCenter.title;
                },
                account_bar_status: function() {
                    return this.userCenter.account_bar ? this.userCenter.account_bar.status : 0;
                },
                // #ifdef H5
                isWechat: function() {
                    return this.$jwx.isWechat();
                },
                menus: function() {
                    let menus = this.userCenter.menus;
                    menus.forEach(item => {
                        if(item.open_type === 'app') {
                            item.id = this.$utils.guid('user-center');
                            let username = this.$utils.getUrlParamApp(item.link_url, 'username');
                            let path = this.$utils.getUrlParamApp(item.link_url, 'path');
                            let strImg = ``;
                            let size = uni.upx2px(50) + 'px';
                            let style = `
                                <style>
                                .app-button-row {
                                    height: 100%;
                                    width: 100%;
                                    display: flex;
                                    flex-direction: row;
                                    justify-content: center;
                                    align-items: center;
                                }

                                .app-button-column {
                                    height: 100%;
                                    width: 100%;
                                    display: flex;
                                    flex-direction: column;
                                    justify-content: center;
                                    align-items: center;
                                }
                                .box-grow-0 {
                                  min-width: 0;
                                  -webkit-box-flex: 0;
                                  -webkit-flex-grow: 0;
                                  -ms-flex-positive: 0;
                                  flex-grow: 0;
                                  -webkit-flex-shrink: 0;
                                  -ms-flex-negative: 0;
                                  flex-shrink: 0;
                                }

                                .box-grow-1 {
                                  min-width: 0;
                                  -webkit-box-flex: 1;
                                  -webkit-flex-grow: 1;
                                  -ms-flex-positive: 1;
                                  flex-grow: 1;
                                  -webkit-flex-shrink: 1;
                                  -ms-flex-negative: 1;
                                  flex-shrink: 1;
                                }

                                    .name {
                                        color: #666666;
                                        white-space: nowrap;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                    }
                                    .dir-left-nowrap {
                                      display: -webkit-box;
                                      display: -webkit-flex;
                                      display: flex;
                                      -webkit-flex-direction: row;
                                      flex-direction: row;
                                      flex-wrap: nowrap;
                                    }

                                .dir-top-nowrap {
                                  display: -webkit-box;
                                  display: -webkit-flex;
                                  display: flex;
                                  -webkit-box-orient: vertical;
                                  -webkit-flex-direction: column;
                                  flex-direction: column;
                                  flex-wrap: nowrap;
                                }

                                .cross-center {
                                  display: -webkit-box;
                                  display: -webkit-flex;
                                  display: flex;
                                  -webkit-align-items: center;
                                  align-items: center;
                                }
</style>


                            `;
                            let classStr = '';
                            let font = '';
                            let padding = '';
                            let arrow = require("../../static/image/icon/arrow-right.png");
                            if (this.userCenter.menu_style == 1) {
                                let margin = uni.upx2px(16);
                                strImg = `<img src="${item.icon_url}" width="${size}" height="${size}" style="margin-right: ${margin}px"/>`;
                                font = '17px';
                                padding = 0;
                            } else if (this.userCenter.menu_style == 2) {
                                let margin = uni.upx2px(28);
                                strImg = `<img src="${item.icon_url}" width="${size}" height="${size}" style="margin-bottom: ${margin}px"/>`;
                                classStr = 'name';
                                font = uni.upx2px(24) + 'px';
                                padding = `0px` + ' ' +uni.upx2px(12) +'px';
                            }

                            let str = `<div class="box-grow-0">${strImg}</div>
                                        <div class="box-grow-1" style="max-width: 100%;"><div style="padding:${padding};font-size: ${font}" class="${classStr}">${item.name}</div></div>`;
                            if (this.userCenter.menu_style == 1) {
                                let width = uni.upx2px(12);
                                let height = uni.upx2px(22);
                                str+= ` <div class="box-grow-0">
                                    <img src="${arrow}" width="${width}px" height="${height}px"/>
                                </div>`
                            }
                            let div = ``;
                            let div1 = '';
                            if (this.userCenter.menu_style == 1) {
                                let padding1 = uni.upx2px(20) + 'px';
                                let padding2 = uni.upx2px(32) + 'px';
                                div1 = `<div style="width: 100%;padding: ${padding1} ${padding2}" class="dir-left-nowrap cross-center">${str}</div>`
                            } else {
                                let padding = uni.upx2px(24) + 'px';
                                div1 = `<div style="width: 100%;padding: ${padding} 0" class="dir-top-nowrap cross-center">${str}</div>`
                            }
                            if (this.userCenter.menu_style == 1) {
                                div = `<div class="app-button-row">${div1}</div>`
                            } else {
                                div = `<div class="app-button-column">${div1}</div>`
                            }
                            style += div;
                            this.$utils.createWxOpenLaunchWeapp(item.id, username, path, style);
                        }
                    });
                    return menus;
                }
                // #endif
            }),
            copyrightLink() {
                if (!this.copyright) return {};
                let { open_type, new_link_url, params } = this.copyright.link;
                return {
                    openType: open_type,
                    url: new_link_url,
                    params: params ? params : []
                };
            },
            ...mapGetters('mallConfig', {
                getTheme: 'getTheme',
                tabBarNavs: 'getNavBar',
            }),
            ...mapGetters('userCenter',{
                userCenter: 'userCenter'
            }),
            listStyle() {
                if (this.userCenter.menu_style == 1) return 'row';
                if (this.userCenter.menu_style == 2) return 'grid dir-left-wrap';
                return '';
            },
            // #ifdef H5
            isShowSetting: function () {
                return this.$storage.getStorageSync('platform') !== 'wechat';
            }
            // #endif
        },
        onLoad() { this.$commonLoad.onload();
            // #ifdef H5
            this.$jwx.config();
            // #endif
        },
        onShow() {
            this.$event.on(this.$const.EVENT_USER_LOGIN).then(() => {
                uni.redirectTo({
                    url: `/pages/user-center/user-center`
                });
            });
            if (this.$user.isLogin()) {
                this.$store.dispatch('user/refresh');
            }
            this.$nextTick().then(() => {
                this.$store.dispatch('userCenter/data');
            });
        },
        methods: {
            // 切换分类
            changeTopNav(index,item) {
                item.activeCurrent = index;
                item.list = item.catList[index].goodsList;
                this.$forceUpdate();
                /////////
                let left = 0;
                for (let i = 0; i < item.catList.length; i++) {
                    if (i === index) {
                        left = left + item.catList[i].width / 2;
                        break;
                    } else {
                        left += item.catList[i].width + uni.upx2px(44);
                    }
                }
                item.scrollLeft = left - uni.upx2px(750 / 2 - 40) || 0;
            },
            buyProduct(data) {
                this.attrGoods.goods = data.goods;
                this.attrGoods.attrShow = data.attrShow;
            },
            rubikHotspot(hotspot) {
                if (hotspot && hotspot.link) {
                    hotspot.link.url = hotspot.link.value;
                    hotspot.link.openType = hotspot.link.open_type;
                }
                return hotspot;
            },
            transLabelBackgroundPosition(val) {
                val = Number(val);
                switch (val) {
                    case 1:
                        return 'left top';
                    case 2:
                        return 'center top';
                    case 3:
                        return 'right top';
                    case 4:
                        return 'left center';
                    case 5:
                        return 'center center';
                    case 6:
                        return 'right center';
                    case 7:
                        return 'left bottom';
                    case 8:
                        return 'center bottom';
                    case 9:
                        return 'right bottom';
                    default:
                        return 'center';
                }
            },
            transLabelBackgroundRepeat(val) {
                val = Number(val);
                switch (val) {
                    case 1:
                        return 'no-repeat';
                    case 2:
                        return 'repeat-x';
                    case 3:
                        return 'repeat-y';
                    case 4:
                        return 'repeat';
                    default:
                        return 'no-repeat';
                }
            },
            bindScroll({detail}) {
                if ((detail.scrollTop > 10 && this.scrollTop <= 10) || (detail.scrollTop < 10 && this.scrollTop > 10)) {
                    this.scrollTop = detail.scrollTop;
                }
                this.$store.dispatch('page/actionSetScrollTop', detail.scrollTop);
            },
            headHeight(e){
                this.startHeight = e * 2;
            },
            router(name) {
                let url = '';
                if (name === '我的收藏') {
                    url = `/pages/favorite/favorite`;
                } else {
                    url = `/pages/foot/index/index`;
                }
                uni.navigateTo({
                    url: url
                });
            },
            // #ifdef H5
            routerGo() {
                uni.navigateTo({
                    url: '/pages/registered/setting'
                });
            },
            // #endif

        },
        /* #ifdef MP-TOUTIAO */
        onPageScroll(detail) {
            if ((detail.scrollTop > 10 && this.scrollTop <= 10) || (detail.scrollTop < 10 && this.scrollTop > 10)) {
                this.scrollTop = detail.scrollTop;
            }
            this.$store.dispatch('page/actionSetScrollTop', detail.scrollTop);
        },
        /* #endif */
        filters: {
            showNum(name, userInfo) {
                if (name === '我的收藏') {
                    return userInfo && userInfo.favorite ? userInfo.favorite : 0;
                } else {
                    return userInfo && userInfo.footprint ? userInfo.footprint : 0;
                }
            }
        }
    }
</script>

<style scoped lang="scss">
.app-my-service {
    width: #{702rpx};
    border-radius: #{16rpx};
    margin: #{24rpx} auto;
    box-shadow: 0 0 #{8rpx} rgba(0, 0, 0, .05);
    background: #fff;

    .title {
        padding: #{32rpx} #{32rpx} #{16rpx};
    }

    .list {
        .item {
            .icon {
                width: #{50rpx};
                height: #{50rpx};
                display: block;
            }

            .arrow {
                width: #{12rpx};
                height: #{22rpx};
            }
        }
    }

    .list.row {
        .item-container {
            padding: #{20rpx} #{32rpx};
        }

        .icon {
            margin-right: #{16rpx};
        }
    }

    .list.grid {
        .item {
            width: 25%;

            .icon {
                margin-bottom: #{28rpx};
            }

            .name {
                padding: 0 #{12rpx};
                font-size: $uni-font-size-weak-one;
                color: $uni-general-color-one;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        .item-container {
            padding: #{24rpx} 0;
        }
    }
}
.u-foot-box {
    position: relative;
    height: 104upx;
}
.u-icon {
    margin-top: 44upx;
    width: 40upx;
    height: 40upx;
    margin-right: 17upx;
}
.u-foot-item {
    font-size: #{26rpx};
    color: #666666;
    padding-top: #{14rpx};
    width: 50%;
}
.u-foot-info {
    text-align: center;
}
.u-foot-num {
    font-size: 32upx;
    margin-bottom: 10upx;
}
.u-line {
    height: 40upx;
    width: 2upx;
    background-color: #666666;
    position: absolute;
    top: 45upx;
    left: 50%;
    margin-left: -2upx;
}
// #ifdef H5
.bd-setting {
    width: 702upx;
    height: 100upx;
    line-height: 100upx;
    border-radius: 16upx;
    padding: 0 33upx;
    background: #ffffff;
    margin: 24upx auto;
    box-shadow: 0 0 #{8rpx} rgba(0, 0, 0, .05);
    font-size:32upx;
    color: #353535;
}
.bd-arrow {
    width: #{12rpx};
    height: #{22rpx};
}
// #endif
.shop-all {
    height: calc(100vh - 110rpx - env(safe-area-inset-bottom));
    height: calc(100vh - 110rpx - constant(safe-area-inset-bottom));
}
.old-page {
    padding-bottom: calc(110rpx + env(safe-area-inset-bottom));
    padding-bottom: calc(110rpx + constant(safe-area-inset-bottom));
}
.u-scroll-view {
    white-space: nowrap;
    //width: 750upx;
    height: 80upx;
    .u-current-round {
        height: 56upx;
        width: auto;
        padding-top:0;
        padding-left: 24upx;
        padding-right: 24upx;
        border-radius: 30upx;
        line-height: 56upx;
        margin: 21.5upx 24upx;
    }
}
.u-nav-item {
    display: inline-block;
    padding-top:22upx;
    padding-bottom: 7upx;
    font-size: 32upx;
    margin-right: 52upx;
    white-space: nowrap;
    border-bottom: 4upx solid transparent;
}
.u-active-current-round {
    color: white;
}
.u-default-text {
    color: #666666;
}
</style>